﻿function initCanvas(dotnetHelper) {

    var canvas = document.getElementById('myCanvas');



    canvas.addEventListener('mousedown', function (e) {
        isDrawing = true;
        var canvas = document.getElementById('myCanvas');
        const rect = canvas.getBoundingClientRect();
        const x = e.offsetX; //e.clientX - rect.left;
        const y = e.offsetY; //e.clientY - rect.top;

        rectangles.forEach(function (item, index) {
            item.isSelected = false;
        });

        for (let i = rectangles.length - 1; i >= 0; i--) {
            if (isPointInRect(rectangles[i], x, y)) {
                rectangles[i].isSelected = true;
                selectedRect = rectangles[i];
                break;
            }
        }
        if (selectedRect) {
            dotnetHelper.invokeMethodAsync('MouseSelect', selectedRect);
        }

        currentRect = new Line(x, y, 0, 0, true);
        draw(); // 绘制初始矩形（只是一个点） 
    });



    canvas.addEventListener('mousemove', function (e) {
        if (!isDrawing) return;

        const x = e.offsetX;
        const y = e.offsetY;

        currentRect.endX = x;
        currentRect.endY = y;
        draw(); // 更新并绘制当前矩形 
    });



    canvas.addEventListener('mouseup', function (e) {
        isDrawing = false;

        let width = 0;
        let height = 0;
        if (currentRect) {
            width = Math.abs(currentRect.endX - currentRect.startX);
            height = Math.abs(currentRect.endY - currentRect.startY);
        }
        if (currentRect && currentRect.endX !== 0 && currentRect.endY !== 0 && (width > 10 || height > 10)) {
            var isExist = rectangles.filter(function (item) {
                return item.startX === currentRect.startX && item.startY === currentRect.startY && item.endX === currentRect.endX && item.endY === currentRect.endY;
            });
            if (isExist.length === 0) {
                rectangles.push({ ...currentRect }); // 存储完成的矩形  
            }
            dotnetHelper.invokeMethodAsync('MouseSelect', currentRect);
        }
        currentRect = null; // 重置当前矩形 
    });

}



function clearCanvas() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    rectangles = [];
}

let rectangles = []; // 存储所有矩形的数组  
let isDrawing = false; // 是否正在绘制新矩形的标志  
let currentRect = null; // 当前正在绘制的矩形
let selectedRect = null; // 当前选中的矩形

class Line {
    constructor(startX, startY, endX, endY, isSelected = false) {
        this.startX = startX;
        this.startY = startY;
        this.endX = endX;
        this.endY = endY;
        this.isSelected = isSelected;
        this.Id = generateSecureUUID();
    }
}


// 添加一个函数来检测点击的坐标是否在某个矩形内  
function isPointInRect(rect, x, y) {

    let rx = Math.min(rect.startX, rect.endX);
    let ry = Math.min(rect.startY, rect.endY);
    let width = Math.abs(rect.endX - rect.startX);
    let height = Math.abs(rect.endY - rect.startY);
    return x >= rx && x <= rx + width &&
        y >= ry && y <= ry + height;
}

function draw() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布上的内容

    let width = 0;
    let height = 0;
    if (currentRect) {
        width = Math.abs(currentRect.endX - currentRect.startX);
        height = Math.abs(currentRect.endY - currentRect.startY);
    }
    if (currentRect && currentRect.endX !== 0 && currentRect.endY !== 0 && (width > 10 || height > 10)) {
        drawRect(currentRect); // 绘制当前矩形  
        rectangles.forEach(function (item, index) {
            item.isSelected = false;
        });
    }

    // 绘制所有矩形  
    rectangles.forEach(rect => {
        ctx.beginPath();
        ctx.rect(Math.min(rect.startX, rect.endX), Math.min(rect.startY, rect.endY), Math.abs(rect.endX - rect.startX), Math.abs(rect.endY - rect.startY));
        ctx.lineWidth = 2; // 正常矩形的线宽
        ctx.strokeStyle = rect.isSelected ? 'red' : 'black'
        ctx.stroke();
    });
}

function drawRect(rect) {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.lineWidth = 2; // 例如，使用更宽的线宽  
    ctx.strokeStyle = 'red'; // 使用红色边框  
    ctx.rect(Math.min(rect.startX, rect.endX), Math.min(rect.startY, rect.endY), Math.abs(rect.endX - rect.startX), Math.abs(rect.endY - rect.startY));
    ctx.stroke();
}

function generateSecureUUID() {
    return crypto.randomUUID();
}

//删除矩形
function deleteDraw(Id) {
    rectangles = rectangles.filter(function (item) {
        return item.Id !== Id;
    });
    draw(); // 重新绘制
}